<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2020/10/20
  Time: 8:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>离职信息</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js" charset="GBK"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <link href="${pageContext.request.contextPath}/static/toastr-master/toastr.min.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/static/toastr-master/toastr.min.js" charset="GBK"></script>
</head>

<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md7">
            <!--上侧搜索表单按钮组-->
            <div class="layui-elem-field">
                <form class="layui-form layui-form-pane" id="searchNewsFrom">
                    <div class="layui-row  layui-col-md-offset1" style="margin-top: 10px;margin-bottom: 10px">
                        <div class="layui-inline layui-col-md5">
                            <label class="layui-form-label">员工编号</label>
                            <div class="layui-input-block">
                                <input type="number" name="staffId" class="layui-input" placeholder="员工编号">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md5">
                            <label class="layui-form-label">员工姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="staffName" class="layui-input" placeholder="员工姓名">
                            </div>
                        </div>
                    </div>
                    <div class="layui-row layui-col-md-offset1">
                        <div class="layui-col-md5">
                            <button type="button" data-type="reload"
                                    class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-normal layui-icon layui-icon-search"
                                    lay-submit lay-filter="searchBtn">搜索
                            </button>
                        </div>
                        <div class="layui-col-md5">
                            <button type="reset" id="searchReset"
                                    class="layui-btn layui-btn-radius layui-btn-fluid layui-icon layui-icon-refresh-3">
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!--数据表格-->
            <table class="layui-hide " id="staffTable" lay-filter="staffTable"></table>
        </div>

        <div class="layui-col-md5">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>员工详情</legend>
            </fieldset>
            <!--员工详情信息-->
            <form class="layui-form" lay-filter="addForm" id="addForm" style="margin-top: 5px">
                <input type="text" name="id" id="createdId" style="display: none">
                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label" style="text-align: center;width: auto">员工编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="staffId" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label" style="text-align: center;width: auto">员工姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="staffName" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label" style="text-align: center;width: auto">所属部门</label>
                    <div class="layui-input-block ">
                        <input type="text" name="dname" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label" style="text-align: center;width: auto">角色</label>
                    <div class="layui-input-block ">
                        <input type="text" name="rname" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label" style="text-align: center;width: auto">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label" style="text-align: center;width: auto">身份证号</label>
                    <div class="layui-input-block">
                        <input type="text" name="idCard" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label" style="text-align: center;width: auto">地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label" style="text-align: center;width: auto">入职时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="createdTime" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item layui-row" style="margin-bottom: 2px">
                    <label class="layui-form-label" style="text-align: center;width: auto">离职时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="resignedTime" class="layui-input" disabled>
                    </div>
                </div>

                <div class="layui-form-item layui-col-md-offset4" style="margin-top: 5px">
                    <button type="reset" class="layui-btn" id="staffCreated">重新入职</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-disabled" disabled>彻底删除</button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
<!--添加按钮组-->
<div class="layui-hide" id="userToolbar">
    <div class="layui-icon layui-icon-refresh layui-anim layui-anim-scaleSpring" lay-event="refresh"> </div>
</div>
<!--数据表格右侧按钮组-->
<div class="layui-hide" id="userBar">
    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="details">查看详情</button>
</div>
<%--删除员工弹出框--%>
<div class="layui-elem-field" style="display: none" id="deleteStaffDiv">
    <form class="layui-form layui-form-pane" id="deleteStaffFrom">
        <h2 style="margin-left: 20px">确认删除该员工吗？</h2>
        <div class="layui-form-item layui-col-md5 layui-col-md-offset2" style="margin-top: 20px;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="deleteStaffBtn">确认删除</button>
            </div>
        </div>
    </form>
</div>
</body>

<script>
    layui.use('table', function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        showTable();
        //查询的提交事件
        form.on('submit(searchBtn)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            //刷新一下table
            table.reload('staffTable', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    staffId: data.field.staffId,
                    staffName: data.field.staffName
                },
                page: {
                    curr: 1
                }
            });

            return false;
        });
        //重置时要刷新表格
        $("#searchReset").click(function () {
            showTable()
        });

        //渲染职位表格-showTable()
        function showTable() {
            table.render({
                elem: '#staffTable'
                , url: '/staffServlet/getAllResignedStaff'//数据接口
                , toolbar: '#userToolbar'
                , defaultToolbar: ['print', 'exports']
                , even: true //开启隔行背景
                , page: true //开启分页
                , text: {
                    none: '暂无相关数据'
                }
                , cols: [[ //表头
                    {field: 'id', title: 'ID', align: 'center', hide: true}
                    , {field: 'staffId', title: '编号', align: 'center'}
                    , {field: 'staffName', title: '姓名', align: 'center'}
                    , {field: 'age', title: '年龄', align: 'center', hide: true}
                    , {field: 'phone', title: '手机号', align: 'center', hide: true}
                    , {field: 'idCard', title: '身份证', align: 'center', hide: true}
                    , {field: 'address', title: '地址', align: 'center', hide: true}
                    , {
                        field: 'status', title: '状态', align: 'center', templet: function (d) {
                            if (d.status == 1) return '<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal">在职</button>';
                            else return '<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">离职</button>'
                        }
                    }
                    , {field: 'rname', title: '角色', align: 'center', width: 90}
                    , {field: 'roleId', title: '职位ID', hide: true}
                    , {field: 'deptId', title: '部门ID', hide: true}
                    , {field: 'dname', title: '部门', align: 'center', hide: true}
                    , {field: 'createdTime', title: '入职时间', align: 'center', hide: true}
                    , {field: 'resignedTime', title: '离职时间', align: 'center', width: 150}
                    , {fixed: 'right', title: '操作', toolbar: '#userBar', align: 'center', width: 100}
                ]]
                , limit: 10
                , limits: [3, 5, 8, 10, 20, 50]
            });
        }

        //监听头部工具栏
        table.on("toolbar(staffTable)", function (obj) {
            switch (obj.event) {
                case 'refresh':
                    showTable();
                    break;
            }
        });

        //监听右侧工具栏
        table.on('tool(staffTable)', function (obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            if (obj.event === 'details') {
                $("#addForm")[0].reset();
                form.val('addForm', data)
            }
        });

        //监听重新入职按钮
        $("#staffCreated").click(function () {
            let staffId = $("#createdId").val()
            if (staffId == null || staffId === "") {
                toastr.warning('无数据无法入职');
            } else {
                $.ajax({
                    url: 'staffServlet/staffCreated',
                    type: 'post',
                    async: false,
                    data: {id: staffId},
                    success: function (result) {
                        if (Number(result) > 0) {
                            showTable();
                            toastr.success('入职成功');
                        } else {
                            showTable();
                            toastr.success('入职失败');
                        }
                    }
                })
            }
        });
        //监听彻底删除按钮
        $("#deleteStaff").click(function () {
            let staffId = $("#createdId").val()
            if (staffId == null || staffId === "") {
                toastr.warning('无数据无法删除');
            } else {
                //打开删除员工弹出层
                layer.open({
                    type: 1,
                    anim: 3,
                    title: ['删除员工', 'font-size:20px'],
                    content: $("#deleteStaffDiv"),
                    offset: '100px',
                    area: ['300px', '150px'],
                })
            }
        });

        //删除员工表单提交
        $("#deleteStaffBtn").click(function () {
            let staffId = $("#createdId").val();
            $.ajax({
                url: '/staffServlet/deleteStaff',
                type: 'post',
                async: false,
                data: {id: staffId},
                success: function (result) {
                    if (result != 0) {
                        showTable();
                        $("#addForm")[0].reset();
                        toastr.success('删除成功');
                        layer.closeAll('page'); //关闭所有页面层
                    } else {
                        showTable();
                        $("#addForm")[0].reset();
                        toastr.error('删除失败');
                        layer.closeAll('page'); //关闭所有页面层
                    }
                },
                dataType: 'json'
            })
        });
    })
</script>

</html>
